[Slider] Fix overlapping slider thumbs stuck at min or max #1732
Conversation
mj12albert
added
the
component: slider
| @@ -129,8 +129,6 @@ export function useSliderThumb(parameters: useSliderThumb.Parameters): useSlider | |||
| }[orientation]]: `${percent}%`, | |||
| [isVertical ? 'left' : 'top']: '50%', | |||
| transform: `translate(${(isVertical || !isRtl ? -1 : 1) * 50}%, ${(isVertical ? 1 : -1) * 50}%)`, | |||
| // So the non active thumb doesn't show its label on hover. | |||
There was a problem hiding this comment.
This was only relevant to ValueLabel from @mui/base
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
mj12albert
force-pushed
the
fix/stuck-overlapping-slider-thumb
branch
from
649074a to
0f4c023
Compare
mj12albert
requested review from
atomiks,
colmtuite and
michaldudak
as code owners
|
I think whichever one was used last should be the one that's on top? e.g. I'd expect max to be on top here but it flips to the min Screen.Recording.2025-04-17.at.9.44.33.am.mov |
Actually assuming all the thumbs have equal z-index, it seems better to consider the right-most thumb (closest to slider-overlap.mov |
Yep ~ here it's only comparing values vs each other and min/max so direction and orientation don't matter |
Fixes #1731
Demo: https://codesandbox.io/p/sandbox/fast-glitter-7tck3z
When 2 or more thumbs overlap in the same position they can be dragged apart now